<template>
  <basic-dialog :visible="show"
                minWidth="700px"
                title="选择接收角色"
                :isShowClose="false"
                :isFullScreen="false"
                isShowBasicFooter
                @close="$emit('close')"
                :loading="isSubmitting"
                @submit="submit">
    <q-card-section class="margin-b-10">
      <transfer-common
        :sourceData="sourceDataFilter"
        value-key="id"
        :styles="{height: '380px', width: '260px' }"
        label-key="name"
        v-model="selected"
        isShowCheckAll
        :right-list="haveSelected"
        @changeData="changeData"
      />
    </q-card-section>
  </basic-dialog>
</template>

<script>
export default {
  name: 'roles-select',
  props: {
    sourceData: {
      type: Array,
      default: () => []
    },
    show: {
      type: Boolean,
      default: false
    },
    haveSelected: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      isSubmitting: false,
      selected: [],
      selectedSource: []
    }
  },
  computed: {
    sourceDataFilter () {
      if (this.haveSelected?.length > 0) {
        return this.sourceData.filter(item => {
          return this.haveSelected.every(sel => item.id + '' !== sel.id + '')
        })
      }
      return this.sourceData
    }
  },
  methods: {
    submit () {
      if (this.selectedSource.length === 0) {
        this.$message.warning('请选择接收角色')
        return
      }
      const data = this.selectedSource.map(item => ({
        name: item.name,
        remark: item.remark,
        id: item.id
      }))
      console.log(data)
      this.$emit('selectSuccess', data)
    },
    changeData (val) {
      this.selectedSource = val
    }
  }
}
</script>

<style scoped>

</style>
